<script setup lang="ts">
  import { reactive,ref,unref, computed } from 'vue';
  import type { PropType } from 'vue';
  import type { FormInstance,FormRules } from 'element-plus'
  import type {DsRegisterParams} from '@/interface/datasource'


  const props = defineProps({
    title: {
      type: String,
      default: 'Tips'
    },
    width: {
      type: String,
      default: '30%'
    },
    sourceTypeList: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    sourceType: {
      type: String,
      default: ''
    },
    dataTypes: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    addParams: {
      type: Object as PropType<DsRegisterParams>,
      default: () => {}
    }
  });
  const emits = defineEmits(['onNewAdd', 'update:sourceType']);


  const dialogShow = ref(true);
  const dsFormRef = ref<FormInstance>()
  // 特殊符号校验函数
  const checkFormat = (rule:any, value:any, callback:any) => {
    if (value) {
      let reg = /[`~!@#$^&*()=|{}':;',\[\].<>《》/?~!@#￥……&*（）——|{}【】‘；：”“'。，、？ ]/;
      if (reg.test(value)) {
        callback(new Error('不能包含特殊符号'));
      } else {
        callback();
      }
    } else {
      callback(new Error('名称不能为空'));
    }
  }
  // form表单rules
  const rules = reactive<FormRules<DsRegisterParams>>({
    type:[{ required: true, message: '请选择数据类型', trigger: 'change' }],
    name:[{required: true, trigger: ['blur', 'change'],validator:checkFormat}],
    ip:[{ required: true, message: '请输入IP地址', trigger: 'blur' }],
    port:[{ required: true, message: '请输入端口号', trigger: 'blur' }],
    database:[{ required: true, message: '请输入数据库', trigger: 'blur' }],
    user: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  })


  // 数据源类型
  const comSourceType = computed({
    get() {
      return props.sourceType;
    },
    set(val) {
      emits('update:sourceType', val);
    }
  });
  // 映射参数
  const comAddParams = computed(() => {
    return props.addParams;
  });
  // database名称
  const comDatabaseName = computed(()=>{
    let str = ""
    switch (comAddParams.value.type){
      case 'postgreSQL':
        str = '数据库'
        break
      case 'oracle':
        str = '实例名'
        break
    }
    return str
  })

  // 弹窗确定
  const confirm = async (formEl:FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        emits('onNewAdd',unref(comAddParams));
      } else {
        return false
      }
    })
  };
</script>

<template>
  <el-dialog
    :title="title"
    :width="width"
    v-model="dialogShow"
    draggable>
    <el-form label-width="120" :model='comAddParams' :rules='rules' ref='dsFormRef'>
      <el-form-item label="数据源类型">
        <el-select
          placeholder=""
          v-model="comSourceType">
          <el-option
            v-for="item in sourceTypeList"
            :key="item.value"
            :value="item.value">
            {{ item.label }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="数据类型"
        prop='type'
        v-if="dataTypes.length > 0">
        <el-select
          placeholder=""
          v-model="comAddParams.type">
          <template v-for="item in dataTypes">
            <el-option
              v-if="item.type.indexOf(comSourceType) > -1"
              :value="item.value">
              {{ item.label }}
            </el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item
        label="名称"
        prop='name'
        v-if="comAddParams.name !== undefined">
        <el-input
          v-model="comAddParams.name"
          maxlength="32"
          show-word-limit></el-input>
      </el-form-item>
      <el-form-item
        label="IP地址"
        prop='ip'
        v-if="comAddParams.ip !== undefined">
        <el-input v-model="comAddParams.ip"></el-input>
      </el-form-item>
      <el-form-item
        label="端口"
        prop='port'
        v-if="comAddParams.port !== undefined">
        <el-input v-model.number="comAddParams.port"></el-input>
      </el-form-item>
      <el-form-item
        :label="comDatabaseName"
        prop='database'
        v-if="comAddParams.database !== undefined">
        <el-input v-model="comAddParams.database"></el-input>
      </el-form-item>
      <el-form-item
        label="用户名"
        prop='user'
        v-if="comAddParams.user !== undefined">
        <el-input v-model="comAddParams.user"></el-input>
      </el-form-item>
      <el-form-item
        label="密码"
        prop='password'
        v-if="comAddParams.password !== undefined">
        <el-input v-model="comAddParams.password" type="password"></el-input>
      </el-form-item>
      <el-form-item
        label="描述"
        v-if="comAddParams.remark !== undefined">
        <el-input
          v-model="comAddParams.remark"
          type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="confirm(dsFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="less"></style>
